<template>
  <div class="flex flex-col text-[14px] py-20">
    <header class="flex items-center justify-between mb-28">
      <h4 class="font-bold text-[18px]">地址列表</h4>
      <el-button @click="handleAddAddress" type="primary">新增</el-button>
    </header>
    <main>
      <template :key="item._id" v-for="item in addressList">
        <el-card class="w-full mb-20">
          <div class="flex flex-row items-center justify-between w-full">
            <div class="flex gap-20">
              <strong>{{ item.name }}</strong>
              <strong>{{ item.phone }}</strong>
              <div>
                {{
                  item.proviceName +
                  item.cityName +
                  item.areaName +
                  item.detailAddr
                }}
              </div>
            </div>
            <div>
              <el-button
                @click="handleSetDefault(item)"
                :disabled="item.isDefault"
                type="primary"
                link
                >设置默认</el-button
              >
              <el-button @click="handleUpdateAddress(item)" type="primary" link
                >修改</el-button
              >
              <el-button @click="handleDeleteAddress(item)" type="primary" link
                >删除</el-button
              >
            </div>
          </div>
        </el-card>
      </template>
    </main>
  </div>
  <el-drawer :size="700" v-model="drawer" title="新增地址">
    <el-form
      label-width="auto"
      :rules="rules"
      :label-position="'right'"
      :model="formData"
    >
      <el-form-item prop="name" label="收件人：">
        <el-input size="large" v-model="formData.name" />
      </el-form-item>
      <el-form-item prop="phone" label="收件手机：">
        <el-input size="large" v-model="formData.phone" />
      </el-form-item>
      <el-form-item prop="cityName" label="收件地区：">
        <el-cascader
          size="large"
          class="w-full"
          :props="{
            label: 'name',
            value: 'code',
          }"
          v-model="formData.regionList"
          :options="options"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item prop="address" label="详细地址：">
        <el-input size="large" v-model="formData.detailAddr" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import api from '@/api/index.js'
import {ElMessage} from 'element-plus'

let drawer = ref(false)
const handleAddAddress = () => {
  drawer.value = true
}

interface RuleForm {
  id: any
  name: string
  phone: string
  regionList: any
  detailAddr: string
}
let options = ref([])
const formData = reactive<RuleForm>({
  id: null,
  name: '',
  phone: '',
  regionList: [],
  detailAddr: '',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: '必填项' }],
  phone: [{ required: true, message: '必填项' }],
  regionList: [{ required: true, message: '必填项' }],
  detailAddr: [{ required: true, message: '必填项' }],
})

onMounted(() => {
  handleGetAddressList()
  handleGetProCityAndAreaList()
})
const addressList = ref<any>([])
async function handleGetAddressList() {
  let res = await api.getAddressList()
  let { code, data } = res
  if (code == 200) {
    console.log(data)
    addressList.value = data
  }
}
const isUpdate = ref(false)
async function confirmClick() {
  let parmas = {
    name: formData.name,
    phone: formData.phone,
    provice: formData.regionList[0],
    city: formData.regionList[1],
    area: formData.regionList[2],
    detailAddr: formData.detailAddr,
  }
  let res
  if (formData.id) {
    parmas.id = formData.id
    res = await api.updateAddress(parmas)
  } else {
    res = await api.addAddress(parmas)
  }
  let { code, data, message } = res
  if (code == 200) {
    drawer.value = false
    handleGetAddressList()
    ElMessage.success(message)
  }
}
async function handleGetProCityAndAreaList() {
  let { code, data } = await api.getProCityAndAreaList()
  if (code == 200) {
    options.value = data
  }
}
function handleChange(value) {
  console.log(value)
  formData.regionList = value
}

function cancelClick() {}

async function handleSetDefault(item) {
  let { code, data } = await api.setDefault({
    id: item._id,
  })
  if (code == 200) {
    console.log(data)
    ElMessage.success('设置默认地址成功')
    handleGetAddressList()
  }
}
async function handleDeleteAddress(item) {
  let { code, data, message } = await api.deleteAddress({
    id: item._id,
  })
  if (code == 200) {
    console.log(data)
    ElMessage.success(message)
    handleGetAddressList()
  }
}
async function handleGetDetailAddress(item) {
  let { code, data, message } = await api.getDetailAddress({
    id: item._id,
  })
  if (code == 200) {
    formData.id = data._id
    formData.name = data.name
    formData.phone = data.phone
    formData.regionList = [data.provice, data.city, data.area]
    formData.regionList[0] = data.provice
    formData.detailAddr = data.detailAddr
  }
}
function handleUpdateAddress(item) {
  drawer.value = true
  handleGetDetailAddress(item)
}
</script>

<style lang="scss" scoped></style>
